import './Scss/PersonnelAttendance.scss'
import { Http } from '../../../../Common/Api'
import { useSize, useRequest, useBoolean } from 'ahooks'
import { useState, useRef, useEffect } from 'react'
import { Column } from '@ant-design/plots'
import dayjs from 'dayjs'
import { LargeScreenTablesModal } from '../LargeScreen/LargeScreenModal'

export const PersonnelAttendance001 = ({ type }) => {
    const { run: geyPersonStatTemperatureStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res
                .map(({ organizationName, attendanceNum, personNum, organizationUuid }) => {
                    if (type) {
                        return [
                            { name: '进场人数', type: organizationName, value: personNum, organizationUuid },
                            { name: '出勤人数', type: organizationName, value: attendanceNum, organizationUuid },
                        ]
                    } else {
                        return [{ name: '进场人数', type: organizationName, value: personNum, organizationUuid }]
                    }
                })
                .flatMap(item => item)
            setChartsData(data)
        },
    })
    useEffect(() => {
        geyPersonStatTemperatureStat({
            url: `getPersonStatTemperatureStat`,
            data: { year: dayjs().format('YYYY'), month: dayjs().format('MM'), date: dayjs().format('DD') },
        })
    }, [geyPersonStatTemperatureStat])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [ChartsData, setChartsData] = useState([])
    const [ChartsOne, setChartsOne] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data: ChartsData,
                isGroup: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setChartsOne(config)
        }
    }, [ChartsData, size])

    return (
        <div className="PersonnelAttendance001" ref={ChartsBox}>
            {ChartsOne && (
                <Column
                    {...ChartsOne}
                    onReady={plot =>
                        plot.on('plot:click', e => {
                            const { x, y } = e
                            const [{ data }] = plot.chart.getTooltipItems({ x, y })
                            setParameter({
                                other: { org: data.organizationUuid },
                                type: 'LargeScreeTable',
                                classification: 'SecondaryPersonnelTemplate',
                            })
                            setTrue()
                        })
                    }
                />
            )}
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="人员出勤明细"
                    parameter={Parameter}
                />
            )}
        </div>
    )
}

export const PersonnelAttendance101 = () => {
    const { run: geyPersonStatTemperatureStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.map(({ dictionaryName, scienceCount }) => ({
                type: dictionaryName,
                数量: scienceCount,
            }))
            setChartsData(data)
        },
    })
    useEffect(() => {
        geyPersonStatTemperatureStat({ url: `getProgressGetScienceInfoByType` })
    }, [geyPersonStatTemperatureStat])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [ChartsData, setChartsData] = useState([])
    const [ChartsOne, setChartsOne] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data: ChartsData,
                isGroup: true,
                xField: 'type',
                yField: '数量',
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setChartsOne(config)
        }
    }, [ChartsData, size])

    return (
        <div className="PersonnelAttendance001" ref={ChartsBox}>
            {ChartsOne && <Column {...ChartsOne} />}
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="人员出勤明细"
                    parameter={Parameter}
                />
            )}
        </div>
    )
}

export const PersonnelAttendance102 = () => {
    const { run: geyPersonStatTemperatureStat } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.map(({ organizationName, scienceCount }) => ({
                type: organizationName,
                数量: scienceCount,
            }))
            setChartsData(data)
        },
    })
    useEffect(() => {
        geyPersonStatTemperatureStat({ url: `getProgressGetScienceInfoByOrg` })
    }, [geyPersonStatTemperatureStat])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [Parameter, setParameter] = useState()

    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [ChartsData, setChartsData] = useState([])
    const [ChartsOne, setChartsOne] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data: ChartsData,
                isGroup: true,
                xField: 'type',
                yField: '数量',
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetX: -24,
                    itemName: { style: { fill: 'white', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setChartsOne(config)
        }
    }, [ChartsData, size])

    return (
        <div className="PersonnelAttendance001" ref={ChartsBox}>
            {ChartsOne && <Column {...ChartsOne} />}
            {TowModal && Parameter && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title="人员出勤明细"
                    parameter={Parameter}
                />
            )}
        </div>
    )
}
